<template>
  <div class="p-6">
    <h1 class="text-3xl font-bold mb-6 text-gray-800">个人健康档案</h1>
    
    <!-- 基本信息 -->
    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
      <h2 class="text-xl font-semibold mb-4 text-gray-800">基本信息</h2>
      
      <el-form :model="profileForm" label-width="120px" class="max-w-2xl">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="姓名">
              <el-input v-model="profileForm.name" placeholder="请输入姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别">
              <el-select v-model="profileForm.gender" placeholder="选择性别">
                <el-option label="男" value="male" />
                <el-option label="女" value="female" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="年龄">
              <el-input-number v-model="profileForm.age" :min="1" :max="120" placeholder="请输入年龄" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身高">
              <el-input v-model="profileForm.height" placeholder="cm">
                <template #append>cm</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="血型">
          <el-select v-model="profileForm.bloodType" placeholder="选择血型">
            <el-option label="A型" value="A" />
            <el-option label="B型" value="B" />
            <el-option label="AB型" value="AB" />
            <el-option label="O型" value="O" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="联系电话">
          <el-input v-model="profileForm.phone" placeholder="请输入联系电话" />
        </el-form-item>
        
        <el-form-item label="紧急联系人">
          <el-input v-model="profileForm.emergencyContact" placeholder="请输入紧急联系人姓名" />
        </el-form-item>
        
        <el-form-item label="紧急电话">
          <el-input v-model="profileForm.emergencyPhone" placeholder="请输入紧急联系电话" />
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="saveProfile">保存档案</el-button>
          <el-button @click="resetProfile">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    
    <!-- 过敏史和病史 -->
    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
      <h2 class="text-xl font-semibold mb-4 text-gray-800">过敏史和病史</h2>
      
      <el-form label-width="120px" class="max-w-2xl">
        <el-form-item label="药物过敏史">
          <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入药物过敏史，多种药物请用逗号分隔"
          />
        </el-form-item>
        
        <el-form-item label="疾病史">
          <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入疾病史，多种疾病请用逗号分隔"
          />
        </el-form-item>
        
        <el-form-item label="手术史">
          <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入手术史，多个手术请用逗号分隔"
          />
        </el-form-item>
        
        <el-form-item label="家族病史">
          <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入家族病史，多种疾病请用逗号分隔"
          />
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary">保存医疗信息</el-button>
        </el-form-item>
      </el-form>
    </div>
    
    <!-- 健康目标 -->
    <div class="bg-white rounded-lg shadow-md p-6">
      <h2 class="text-xl font-semibold mb-4 text-gray-800">健康目标</h2>
      
      <el-form :model="healthGoals" label-width="120px" class="max-w-2xl">
        <el-form-item label="目标体重">
          <el-input v-model="healthGoals.targetWeight" placeholder="kg">
            <template #append>kg</template>
          </el-input>
        </el-form-item>
        
        <el-form-item label="每日步数目标">
          <el-input-number v-model="healthGoals.dailySteps" :min="1000" :max="50000" :step="1000" />
        </el-form-item>
        
        <el-form-item label="运动频率">
          <el-select v-model="healthGoals.exerciseFrequency" placeholder="选择运动频率">
            <el-option label="每天" value="daily" />
            <el-option label="每周3-4次" value="3-4times" />
            <el-option label="每周1-2次" value="1-2times" />
            <el-option label="偶尔" value="occasionally" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="目标血压">
          <el-row :gutter="10">
            <el-col :span="11">
              <el-input v-model="healthGoals.targetSystolic" placeholder="收缩压">
                <template #append>mmHg</template>
              </el-input>
            </el-col>
            <el-col :span="2" class="text-center">/</el-col>
            <el-col :span="11">
              <el-input v-model="healthGoals.targetDiastolic" placeholder="舒张压">
                <template #append>mmHg</template>
              </el-input>
            </el-col>
          </el-row>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary">保存目标</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const profileForm = ref({
  name: '张三',
  gender: 'male',
  age: 35,
  height: '175',
  bloodType: 'A',
  phone: '13800138000',
  emergencyContact: '李四',
  emergencyPhone: '13900139000'
})

const healthGoals = ref({
  targetWeight: '65',
  dailySteps: 8000,
  exerciseFrequency: '3-4times',
  targetSystolic: '120',
  targetDiastolic: '80'
})

const saveProfile = () => {
  console.log('保存档案:', profileForm.value)
  ElMessage.success('个人档案保存成功！')
}

const resetProfile = () => {
  console.log('重置档案')
}
</script>